<template>
  <view class="page">
    <!-- 页面其他内容 -->
    
    <!-- 拖动的发布按钮 -->
    <view
      class="drag-btn"
      :style="btnStyle"
      @touchstart="handleTouchStart"
      @touchmove.stop.prevent="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <uni-icons type="plusempty" size="30" color="#fff" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      btnLeft: 0,
      btnTop: 0,
      windowWidth: 375,
      windowHeight: 667,
      btnSize: 60,
      dragging: false
    };
  },
  computed: {
    btnStyle() {
      return `
        position: absolute;
        left: ${this.btnLeft}px;
        top: ${this.btnTop}px;
        width: ${this.btnSize}px;
        height: ${this.btnSize}px;
        background-color: #f90;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      `;
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        this.windowHeight = res.windowHeight;
        // 初始化默认右下角（距离底部和右侧 20px）
        this.btnLeft = res.windowWidth - this.btnSize - 20;
        this.btnTop = res.windowHeight - this.btnSize - 20;
      }
    });
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
      this.dragging = true;
    },
    handleTouchMove(e) {
      if (!this.dragging) return;
      const moveX = e.touches[0].clientX - this.startX;
      const moveY = e.touches[0].clientY - this.startY;

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;

      this.btnLeft += moveX;
      this.btnTop += moveY;

      // 限制范围不超出屏幕
      const maxLeft = this.windowWidth - this.btnSize;
      const maxTop = this.windowHeight - this.btnSize;
      if (this.btnLeft < 0) this.btnLeft = 0;
      if (this.btnLeft > maxLeft) this.btnLeft = maxLeft;
      if (this.btnTop < 0) this.btnTop = 0;
      if (this.btnTop > maxTop) this.btnTop = maxTop;
    },
    handleTouchEnd() {
      this.dragging = false;
      // 可选：可以存储 btnLeft 和 btnTop 到本地缓存，便于下次使用
    }
  }
};
</script>

<style scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
